<template>
  <button
    class="b-button"
    :class="buttonStyles"
    :disabled="disabled"
    @click="handleClick"
  >
    <i v-if="icon" class="iconfont" :class="icon"></i>
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'b-button',
  props: {
    type: {
      type: String,
      default: '',
      validator: value => {
        return ["", "primary", "success", "info", "warning", "danger"].includes(value)
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    rounded: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: ''
    },
    circle: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: ''
    }
  },
  computed: {
    buttonStyles () {
      return [
        this.type ? `b-button-${this.type}`: '',
        this.rounded ? 'b-button-round' : '',
        this.circle ? 'b-button-circle' : '',
        this.size ? `b-button-${this.size}` : '',
        this.disabled ? 'b-button-disabled' : ''
      ]
    }
  },
  methods: {
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>

<style scoped lang='less'>
</style>